<!--
 * @Author: Wangtao
 * @Date: 2022-07-12 16:04:11
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-07-13 18:16:22
-->
<template>
  <!-- 管理工作台 -->
  <div class="home">
    <div class="home-left">
      <company-info></company-info>
    </div>
    <div class="home-right">
      <div class="home-top">
        <div class="home-top-left">
          <newFeaturePreview></newFeaturePreview>
        </div>
        <div class="home-top-right">
          <notice></notice>
        </div>
      </div>
      <div class="home-bottom">
        <home-service></home-service>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import companyInfo from './components/company-info.vue'
import newFeaturePreview from './components/new-feature-preview.vue'
import notice from './components/notice-view.vue'
import homeService from './components/home-service.vue'
export default defineComponent({
  name: 'homeComponent',
  components: {
    companyInfo,
    newFeaturePreview,
    notice,
    homeService
  }
})
</script>

<style lang="stylus" scoped>
.home
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 16px;
  width: 100%;
  height: 100%;
  flex: none;
  align-self: stretch;
  box-sizing border-box
  background: var(--mc-gray2-color);
  .home-left
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    width: 340px;
    height: 100%;
    background: #FFFFFF;
    border-radius: 4px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    box-sizing border-box
  .home-right
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: calc(100% - 340px);
    height: 100%;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    box-sizing border-box
    .home-top
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      padding-left: 16px;
      gap: 16px;
      width: 100%;
      flex: 1;
      order: 1;
      flex-grow: 1;
      box-sizing border-box
      .home-top-left
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        height: 100%;
        background: #FFFFFF;
        border-radius: 4px;
        flex: 1;
        order: 0;
        flex-grow: 1;
      .home-top-right
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        height: 100%;
        background: #FFFFFF;
        border-radius: 4px;
        flex: 1;
        order: 1;
        flex-grow: 1;
    .home-bottom
      padding-left 16px
      flex: 2;
      order: 2;
      align-self: stretch;
      flex-grow: 1.5;
      box-sizing border-box
</style>
